<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/util.js"></script>
    <style>
        html, body, h1, form, fieldset, legend, ol, li {
            padding: 0;
            margin: 0;
        }

        ol {
            list-style: none;
        }

        body {
            background: #fff;
            color: #111;
            padding: 20px;
        }

        form#payment {
            background: #425ec5;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            padding: 20px;
            width: 600px;
        }

        form#payment fieldset {
            border: none;
            margin-bottom: 10px;
        }

        form#payment fieldset:last-of-type {
            margin-bottom: 0;
        }

        form#payment legend {
            color: #384313;
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 10;
            text-shadow: 0px 1px 1px #425ec5;
        }

        form#payment > fieldset > legend:before {

            counter-increment: fieldsets;
        }

        form#payment fieldset fieldset legend {
            color: #111;
            font-size: 13px;
            font-weight: normal;
            padding-bottom: 0;
        }

        form#payment ol li {
            background: #425ec5;
            background: rgba(255, 255, 255, 0.3);
            border: #e3ebc3;
            border-color: rgba(255, 255, 255, 0.6);
            border-style: solid;
            border-width: 2px;
            -webkit-border-radius: 5px;
            line-height: 30px;
            padding: 5px 10px;
            margin-bottom: 2px;
        }

        form#payment ol ol li {
            bakcground: none;
            border: none;
            float: left;
        }

        form#payment label {
            float: left;
            font-size: 13px;
            width: 110px;
        }

        form#payment fieldset fieldset label {
            background: none no-repeat left 50%;
            line-height: 20px;
            padding: 0 0 0 30px;
            width: auto;
        }

        form#payment fieldset fieldset label:hover {
            cursor: pointer;
        }

        form#payment input:not([type=radio]), form#payment textarea {
            background: #fff;
            border: #fc3 solid 1px;
            -webkit-border-radius: 3px;
            outline: none;
            padding: 5px;
        }
    </style>
</head>
<body>
<div id="app">

    <!-- 系统编号: <input type="text"  v-model="pojo.codes">
     <br>
     系统名称: <input type="text" v-model="pojo.iname">
     <br>
     IP地址: <input type="text" v-model="pojo.ipAddress">
     <br>
     IP地址描述: <input type="text" v-model="pojo.ipDescribe">
     <br>
     <br>
     电话: <input type="text" v-model="pojo.phone"><br>
     邮件: <input type="text" v-model="pojo.email">
     <br>
     管理员: <select v-model="pojo.uid">
     <option value="">请选择</option>
     <option v-for="d in users" :value="d.uid">{{d.uname}}</option>
 </select>
     <input type="button" value="添加" @click="add()">-->
    <form id=payment>
        <fieldset>
            <legend>学生详细信息</legend>
            <ol>
                <li>
                    <label for="sname">学生名称：</label>
                    <input type="text" v-model="pojo.sname" id="sname" required>
                </li>
                <li>
                    <label for="saddress">学生地址：</label>
                    <input type="text" id="saddress" v-model="pojo.saddress">
                </li>
            </ol>
            <ol>
                <li>
                    <label for="age">学生年龄：</label>
                    <textarea v-model="pojo.age" id="age" rows="1"></textarea>
                </li>
                <!-- <li>
                     <label>管理员:</label>
                     <select v-model="pojo.uid">
                     <option value="">请选择</option>
                     <option v-for="d in users" :value="d.uid">{{d.uname}}</option>
                 </select>
                 </li>-->
                <legend>用户信息</legend>
                <table class="datatable" border="1" cellspacing="0" width="450px">
                    <thead>
                    <tr>
                        <th>选择</th>
                        <th>教师姓名</th>
                        <th>教师地址</th>
                        <th>教师年龄</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="c in tableData">
                        <td>
                            <input :id="c.id" v-model="checkitemIds" type="checkbox" :value="c.id">
                        </td>
                        <td><label :for="c.id">{{c.tname}}</label></td>
                        <td><label :for="c.id">{{c.taddress}}</label></td>
                        <td><label :for="c.id">{{c.age}}</label></td>
                    </tr>
                    </tbody>
                </table>

                <input type="button" @click="addD()" value="提交">
            </ol>

        </fieldset>
    </form>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            pojo: {},
            tableData: [],
            checkitemIds: []
        },
        created() {
            this.findTea()
        },
        methods: {
            findTea() {
                axios.get("/sys/stu/findTea").then(res => {
                    this.tableData = res.data.data
                })
            },
            addD() {
                axios.post("/sys/stu/addD?checkitemIds=" + this.checkitemIds, this.pojo).then(res => {
                    alert("添加成功!")
                    location.href = "stu.html"
                })
            }
        }
    })
</script>
</body>
</html>